<script setup>
import { onMounted, inject, reactive } from 'vue'
import { getStyles } from './index'
const getNode = inject('getNode')
const nodeConfig = reactive({
  nodeData: null,
  value: null,
  styles: null,
  isInit: false
})
const updateData = (nodeData) => {
  const { contentValue } = nodeData
  nodeConfig.styles = getStyles(nodeData)
  nodeConfig.value = contentValue
  nodeConfig.nodeData = nodeData
  nodeConfig.isInit = true
}

onMounted(() => {
  const node = getNode()
  updateData(node.getData())
  node.on('change:data', ({ current }) => {
    updateData(current)
  })
})
</script>

<template>
  <div
    :style="nodeConfig.styles"
    class="overflow-hidden w-full h-full"
    v-if="nodeConfig.isInit"
  >
    {{ nodeConfig.value }}
  </div>
</template>
